<template>
    <div>
        <div class="com_box consume_head flexbox flexcenter flexbetween">
            <div class="flexbox flexcenter">
                <div class="consume_tab" :class="{'active':type==1}" @click="selectType(1)">优化师</div>
                <div class="consume_tab" :class="{'active':type==2}" @click="selectType(2)">项目</div>
            </div>
            <div class="flexbox flexcenter">
                <el-date-picker v-model="date" value-format="yyyy-MM" @change="selectDate" style="width:160px" :clearable="false" size="small" type="month" placeholder="选择月">
                </el-date-picker>
                <el-dropdown>
                    <el-button plain size="small" class="plain_blue" style="margin-left:12px">
                        大屏数据
                        <i class="el-icon-arrow-down el-icon--right arrow_icon" style="color:#4475FF"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="toLaunchData">每月数据</el-dropdown-item>
                        <el-dropdown-item @click.native="toLiveData">实时数据</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button type="primary" size="small" style="margin-left:12px" @click="downloadFile">
                    <div class="flexbox flexcenter flexjust">
                        <svg width="16" height="16" viewBox="0 0 16 16" stroke='white' class="btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        导出数据
                    </div>
                </el-button>
            </div>
        </div>
        <OptCost v-if="type==1" ref="optRef" :queryInfo="queryInfo" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
        <ProCost v-else ref="proRef" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" :queryInfo="queryInfo" @getProChild="getProChild" @getProData="getProData" @getProTime="getProTime" />
    </div>
</template>

<script>
import downLoad from "../../excel/ExportDown";
import filters from "../../assets/js/filters";
import OptCost from "./OptCost";
import ProCost from "./ProCost";
export default {
    name: "",
    data() {
        return {
            loading: false,
            date: "",
            type: 1,
            queryInfo: {
                year: "",
                month: "",
            },
            proInfo: {
                channel: 0,
                business_scene: 0,
            },
            optData: {},
            tableData: [],
            chartsData:[],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                    let dateTime = new Date();
                    let nowTime =
                        dateTime.getHours() * 60 + dateTime.getMinutes();
                    if (nowTime > 740) {
                        return time.getTime() > Date.now() - 8.64e7;
                    } else {
                        return time.getTime() > Date.now() - 8.64e7 - 8.64e7;
                    }
                },
            },
        };
    },
    created() {
        this.getTimeFn();
        this.getOptData();
        this.getOptTime();
    },
    methods: {
        getTimeFn() {
            const that = this;
            const nowDate = new Date();
            that.date = that.formatDate(nowDate);
            let arr = that.date.split("-");
            this.queryInfo.year = arr[0];
            this.queryInfo.month = arr[1];
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            return myyear + "-" + mymonth;
        },

        //获取优化师列表
        async getOptData() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/cost/costRank",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.chartsData = res.data.list;
                this.$refs.optRef.getData(res.data);
            }
        },

        //获取优化师趋势
        async getOptTime() {
            const { data: res } = await this.$http.post(
                "launch/cost/costTrend",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$refs.optRef.getTime(
                    res.data.list,
                    this.queryInfo.year,
                    this.queryInfo.month
                );
            }
        },

        //获取项目列表
        async getProData() {
            this.loading = true;
            this.proInfo = Object.assign(this.proInfo, this.queryInfo);
            const { data: res } = await this.$http.post(
                "launch/cost/prjCostRank",
                this.proInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.$refs.proRef.getData(res.data);
            }
        },

        //获取项目趋势
        async getProTime() {
            this.proInfo = Object.assign(this.proInfo, this.queryInfo);
            const { data: res } = await this.$http.post(
                "launch/cost/prjCostTrend",
                this.proInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$refs.proRef.getTime(
                    res.data.list,
                    this.queryInfo.year,
                    this.queryInfo.month
                );
            }
        },

        getProChild(val) {
            this.proInfo.channel = val.channel;
            this.proInfo.business_scene = val.business_scene;
            this.getProData();
            this.getProTime();
        },

        downloadFile() {
            if (this.type == 1) {
                var excelDatas = [
                    {
                        tHeader: [
                            "人员姓名",
                            "千川短视频",
                            "千川直播",
                            "巨量短视频",
                            "UD短视频",
                            "随心推",
                            "消耗目标",
                            "每日剩余目标任务",
                            "完成进度(%)",
                            "总消耗",
                        ],
                        filterVal: [
                            "nickname",
                            "stat_cost_qcvideo",
                            "stat_cost_qclive",
                            "stat_cost_advideo",
                            "stat_cost_udvideo",
                            "free_cost",
                            "target_cost",
                            "target_cost_remain",
                            "progress",
                            "stat_cost",
                        ],
                        tableDatas: this.tableData,
                        sheetName: "优化师消耗",
                    },
                ];
                downLoad(excelDatas, "优化师消耗");
            } else if (this.type == 2) {
                for (let i in this.tableData) {
                    this.tableData[i].judao = filters.chanelName2(
                        this.tableData[i].channel
                    )
                        ? filters.chanelName2(this.tableData[i].channel) +
                          filters.sceneFilter(this.tableData[i].business_scene)
                        : filters.sceneFilter(this.tableData[i].business_scene);
                }
                var excelDatas = [
                    {
                        tHeader: [
                            "品牌名称",
                            "投放渠道",
                            "消耗目标",
                            "每日剩余目标任务",
                            "总消耗",
                            "完成进度(%)",
                        ],
                        filterVal: [
                            "brand_name",
                            "judao",
                            "target_cost",
                            "target_cost_remain",
                            "stat_cost",
                            "progress",
                        ],
                        tableDatas: this.tableData,
                        sheetName: "项目消耗",
                    },
                ];
                downLoad(excelDatas, "项目消耗");
            }
        },

        // 选择板块
        selectType(type) {
            this.type = type;
            if (this.type == 1) {
                this.getOptData();
                this.getOptTime();
            } else {
                this.getProData();
                this.getProTime();
            }
        },

        // 选择时间
        selectDate(date) {
            let arr = date.split("-");
            this.queryInfo.year = arr[0];
            this.queryInfo.month = arr[1];
            if (this.type == 1) {
                this.getOptData();
                this.getOptTime();
            } else {
                this.getProData();
                this.getProTime();
            }
        },

        // 跳转大屏数据
        toLaunchData() {
            let routeUrl = this.$router.resolve({
                path: "/launchdata",
                query: {
                    data: JSON.stringify(this.chartsData),
                },
            });
            window.open(routeUrl.href, "_blank");
        },

        // 跳转实时数据
        toLiveData() {
            let routeUrl = this.$router.resolve({
                path: "/launchlive"
            });
            window.open(routeUrl.href, "_blank");
        },
    },

    components: {
        OptCost,
        ProCost,
    },
};
</script>


<style>
.arrow_icon.el-icon-arrow-down:before {
    content: "\E790" !important;
    color: #4475FF !important;
}
</style>



